<template>
  <div>
    <div  class="left-main">
      <span>知识点管理</span>
      <div class="tree-div">
        <el-tree
          :data="knowledges"
          props="{id, parent, chapter_name, children}"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false">
          
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span @click="goEdit(data.id)">{{data.knowledge_name}} &nbsp;&nbsp;</span>
            <span>
              <el-button
                type="text"
                size="mini"
                @click="modify(data)">
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="append(data)">
                <i class="el-icon-circle-plus-outline"></i>
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="remove(data)">
                <i class="el-icon-remove-outline"></i>
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
      <div class="demo-input-suffix">
        <el-input v-model="knowledge_name" placeholder="新建一级节点"></el-input>
        <el-button
          style="margin-left: 15px;"
          type="primary"
          @click="onCreate">
          新建
        </el-button>
      </div>
    </div>
    <el-dialog title="编辑节点" :modal="false" :visible.sync="showEditChapter">
      <el-input type="text" v-model="activeNode.knowledge_name" ></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEditChapter = false">取 消</el-button>
        <el-button type="primary" @click="editChapterSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {kldModel} from '@/api/models.js';
import { Message} from 'element-ui';
import {WConfirm} from '@/utils/utils.js'
export default {
  data() {
    return {
      knowledges: [],
      knowledge_name: null,
      showEditChapter: false,
      activeNode: {},
      editAction: 1
    }
  },
  mounted() {
    this.getList(); 
  },
  methods: {
    onCreate() {
      console.log('oncreate')
      kldModel.create({
        knowledge_id: 0,
        knowledge_name: this.knowledge_name,
        action: 1
      }, res=>{ 
        Message.success(res.message);
        this.getList()
      })
    },
    getList() {
      kldModel.list( res => {
        this.knowledges = res.data
      }, err => {
        Message.warning(err.message);
      }) 
    },
    modify(node) {
      console.log(node)
      this.activeNode = node
      this.showEditChapter = true;
      this.editAction = 3
    },
    append(node) {
      console.log('append', node)
      this.activeNode = {
        id: node.id,
        knowledge_name: '' 
      }
      this.editAction = 1;
      this.showEditChapter = true;
    },
    remove(node) {
      console.log(node)
      WConfirm('此操作将影响所有关联该知识点的课程，确定要删除这个知识点吗？', () => {
        kldModel.create({
          knowledge_id: node.id,
          action: 2,
          knowledge_name: node.knowledge_name
        }, () => {
          Message.success('知识点删除成功');
          this.getList();
        }, err => {
          Message.warning(err.message);
        })   
      }, ()=> {
        Message.warning('已取消操作')
      })
    },
    editChapterSubmit() {
      if(!this.activeNode.knowledge_name)
        return Message.warning('请填完全信息')
      this.showEditChapter = false; 
      kldModel.create({
        knowledge_id: this.activeNode.id,
        knowledge_name: this.activeNode.knowledge_name,
        action: this.editAction
      }, res => {
        Message.success(res.message);
        this.getList();
      }, err => {
        Message.warning(err.message);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.left-main{
  text-align: left;
}
.tree-div{
  border: 1px solid #cccccc;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 20px;
  width: 80%;
}

</style>